<template>
  <div class="table">
    <el-table :data="tableData" stripe style="width: 100%" show-header highlight-current-row table-layout="auto"
      :span-method="operationObj.row ? objectSpanMethod : objectSpanMethod1">
      <el-table-column :prop="item" :label="key" v-for="(key, item, index) in tableArr"
        :width="index === 1 ? 200 : 'auto'" :key="item"></el-table-column>

      <!-- 操作按钮 -->
      <el-table-column fixed="right" :label="operationObj.title1" width="80" v-if="operationObj.bool1">
        <template #default="scope">
          <el-button :type="operationObj.type1" @click="$emit('goDingDan', scope.$index)" :text="operationObj.text1"
            v-show="tableData[scope.$index].btn1 !== false" size="small">
            {{
    tableData[scope.$index].type1
      ? tableData[scope.$index].type1
      : operationObj.operation1
            }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script setup>
import { useCounterStore } from "../../stores/counter.js";
import { ref } from "vue";


defineEmits(["goDingDan"]);


const props = defineProps({
  tableData: {
    default: [
      {
        A: "矿大松源自助回收机1#",
        B: "9585265001",
        C: "25",
        D: "265",
        E: "运行中",
        F: "50%",
        btn1: true, //单个btn是否显示
        type1: "查看详情", // btn内容需要单独写
      },
      {
        A: "矿大松源自助回收机1#",
        B: "9585265001",
        C: "25",
        D: "265",
        E: "运行中",
        F: "70%",
        btn1: true, //单个btn是否显示
        type1: "查看详情", // btn内容需要单独写
      },
      {
        A: "矿大松源自助回收机1#",
        B: "9585265001",
        C: "25",
        D: "265",
        E: "运行中",
        F: "90%",
        btn1: true, //单个btn是否显示
        type1: "查看详情", // btn内容需要单独写
      },
      {
        A: "矿大松源自助回收机1#",
        B: "9585265001",
        C: "25",
        D: "265",
        E: "已关机",
        F: "20%",
        btn1: true, //单个btn是否显示
        type1: "查看详情", // btn内容需要单独写
      },
      {
        A: "矿大松源自助回收机1#",
        B: "9585265001",
        C: "25",
        D: "265",
        E: "设备故障",
        F: "10%",
        btn1: true, //单个btn是否显示
        type1: "查看详情", // btn内容需要单独写
      },
      {
        A: "矿大松源自助回收机1#",
        B: "9585265001",
        C: "25",
        D: "265",
        E: "运行中",
        F: "30%",
        btn1: true, //单个btn是否显示
        type1: "查看详情", // btn内容需要单独写
      },
      {
        A: "矿大松源自助回收机1#",
        B: "9585265001",
        C: "25",
        D: "265",
        E: "运行中",
        F: "30%",
        btn1: true, //单个btn是否显示
        type1: "查看详情", // btn内容需要单独写
      },
      {
        A: "矿大松源自助回收机1#",
        B: "9585265001",
        C: "25",
        D: "265",
        E: "运行中",
        F: "30%",
        btn1: true, //单个btn是否显示
        type1: "查看详情", // btn内容需要单独写
      },
      {
        A: "矿大松源自助回收机1#",
        B: "9585265001",
        C: "25",
        D: "265",
        E: "已关机",
        F: "30%",
        btn1: true, //单个btn是否显示
        type1: "查看详情", // btn内容需要单独写
      },
    ],
  },
  tableArr: {
    default: {
      A: "设备名称", B: '设备编号', C: '本月回收次数', D: '本月已支持币', E: '状态', F: '剩余空间',
    }
  },
  operationObj: {
    default: {
      operation1: "查看详情",
      title1: "操作", //操作标题
      type1: "primary", //button 类型
      text1: false, // true 为文字类型
      bool1: true, //操作是否显示
      row: false, //是否合并
    },
  },
  size: {
    type: String,
    default: "small",
  },
});


const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 3,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }

  if (columnIndex === 1) {
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 3,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};

const objectSpanMethod1 = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 1,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 1,
        colspan: 1,
      };
    }
  }
};

</script>
  
<style lang="less" scoped>
.table {
  width: 100%;

  // height: 150px;
}
</style>
  